<template>
    <van-sticky>
        <van-nav-bar
            title="物流详情"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <van-sticky>
        <div class="info">
            <div class="order">订单号：{{ order.code }}</div>
            <div class="consignee">收货人：{{ order.address.consignee }}</div>
            <div class="mobile">手机号：{{ order.address.mobile }}</div>
            <div class="name">物流公司：{{ order.express.name }}</div>
            <div class="code">物流单号：{{ order.expresscode }}</div>
        </div>
    </van-sticky>

    <van-steps direction="vertical" :active="0">
        <van-step v-for="item in order.express_info">
            <h3>{{ item.status }}</h3>
            <p>{{ item.time }}</p>
        </van-step>
    </van-steps>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

const orderid = ref(proxy.$route.query.orderid ?? 0);

const order = ref({
    address:{},
    express:{}
});

onBeforeMount(() => {
    getExpress();
})

const getExpress = async () =>
{
    let params = {
        busid:business.value.id,
        orderid:orderid.value
    }

    let result = await proxy.$http.post({
        url:'/order/express',
        params
    })

    if(result.code === 1)
    {
        order.value = result.data;
    }else{
        proxy.$fail({
            message:result.msg,
            onClose:() => {
                proxy.$router.back();
            }
        });
    }
}
const onBack = () => proxy.$router.back();
</script>

<style scoped>
.info{
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 5px 0px 10px 5px #ccc;
    padding: 10px;
    font-size: 14px;
}
</style>